<!-- 表格组件 -->
<template>
  <el-table
    ref="tableComp"
    :data="props.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @row-click="getData"
    v-loading="loading">
    <!-- 第一列选中框 -->
    <el-table-column
      v-if="props.multiple"
      type="selection"
      width="55" />
      <!-- 序号列 -->
    <el-table-column
      v-if="props.needNum"
      label="序號"
      type="index"
      width="100">
      <template #default="scope">
        <div>
          {{ (pageNum - 1) * 10 + scope.$index + 1 }}
        </div>
      </template>
    </el-table-column>
    <!-- 配置列 -->
    <el-table-column
      v-for="(item, index) in props.tableColumns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :type="item.type">
      <template #default="scope">
        <div v-if="item.prop === 'entranceIml'">
          <img class="table_icon"
            :src="scope.row.entranceIml" alt="" />
        </div>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="scope">
        <div v-if="isOperate">
          <el-button size="small" @click="$emit('checkClick', scope.row)">
            {{ operate }}
          </el-button>
        </div>
        <slot name="operate" v-if="!isOperate" :message="scope.row" />
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :page-sizes="props.pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="SizeChange"
      @current-change="changePage"
    />
</template>

<script lang="ts" setup>
// import { emit } from 'process'
const props = defineProps({
  tableColumns: Object,
  tableData: Array,
  multiple: {
    type: Boolean,
    default: false,
  },
  isOperate: Boolean,
  loading: Boolean,
  needNum: Boolean,
  edit: {
    type: Boolean,
    default: true,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  operate: {
    type: String,
    default: '修改',
  },
  operate2: {
    type: String,
    default:''
  },
  pageSizes: {
    type: Array,
    default: () => {
      return [10, 20, 50]
    }
  },
  total: {
    type: Number,
  },
})
// const handleClick = () => {
//   console.log('click')
// }
const emit = defineEmits(['handleSelectionChange', 'getData', 'checkClick', 'editClick','getPage'])
const handleSelectionChange = (val: []) => {
  emit('handleSelectionChange', val)
}
//  单行点击事件
const getData = (val: []) => {
  emit('getData', val)
}
let pageParams = {
  page: 1,
  pageSize:10
}
// 改变页码的大小
const SizeChange = (val: number) => {
  pageParams.pageSize= val
  emit('getPage', pageParams)
  console.log(val,'页码大小的改变事件')
}
// 改变页码
const changePage = (val: number) => {
  pageParams.page = val
  emit('getPage', pageParams)
  console.log(val,'页码的改变事件')
}
</script>
<style lang="scss" scoped>
:deep(.el-table__inner-wrapper) {
  width: 100%;

  .el-table__header {
    .el-table__cell {
      background-color: #f7f7f7;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      text-align: center;
    }
  }

  .el-table__body {
    .el-table__cell {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #737b8b;
      text-align: center;
    }

    .el-button {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #216fed;
      margin: 0 10px;
    }

    .table_icon {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
